<script lang="ts" setup>
import holidays from '@/assets/holidays.json';
import { CirclePlus } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import  { CalendarDateType, CalendarInstance, ElDrawer, ElMessageBox } from 'element-plus'
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n()
const value = ref(new Date())
const typedHolidays: Holidays = holidays as Holidays;

// 示例：读取所有日期键
const holidayDates = Object.keys(typedHolidays);
const isHoliday = (date: string): boolean => {
    return holidayDates.includes(date);
};
// 示例：获取某个日期的节假日信息
const getHolidayInfo = (date: string): string[] | undefined => {
    let values: Holiday = typedHolidays[date];

    if (values == undefined) {
        return undefined;
    }
    return values?.zh_CN;
};

const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
    if (!calendar.value) return
    calendar.value.selectDate(val)
}

const formLabelWidth = '80px'
let timer;
const table = ref(false)
const dialog = ref(false)
const loading = ref(false)

const form = reactive({
    schedule_title: '',
    schedule_date:'',
    schedule_start_date:'',
    schedule_start_time:'',
    schedule_content:'',
    schedule_address:'',
    schedule_alarm:'15',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

const onClick = () => {
    loading.value = true
    setTimeout(() => {
        loading.value = false
        dialog.value = false
    }, 400)
}

const handleClose = (done:Function) => {
    
    if (loading.value) {
        return
    }
    // ElMessageBox.confirm(t('command.name'))
    //     .then(() => {
    //         loading.value = true
    //         timer = setTimeout(() => {
    //             done()
    //             // 动画关闭需要一定的时间
    //             setTimeout(() => {
    //                 loading.value = false
    //             }, 400)
    //         }, 2000)
    //     })
    //     .catch(() => {
    //         // catch error
    //     })
}

const cancelForm = () => {
    loading.value = false
    dialog.value = false
    clearTimeout(timer)
}

const hoveredDate = ref<string | null>(null);

const handleMouseOver = (date: string) => {
    hoveredDate.value = date;
};

const handleMouseLeave = () => {
    hoveredDate.value = null;
};
interface Holidays {
    [date: string]: Holiday;
}
interface Holiday {
    zh_CN: string[];
    zh_TW: string[];
    zh_HK: string[];
    EN: string[];
}
</script>
<template>
    <div class="calendar">
        <el-calendar ref="calendar" v-model="value">
            <template #header="{ date }">
                <span>{{ date }}</span>
                <span></span>
                <el-button-group>
                    <el-button size="small" @click="selectDate('prev-year')">
                        上一年
                    </el-button>
                    <el-button size="small" @click="selectDate('prev-month')">
                        上个月
                    </el-button>
                    <el-button size="small" @click="selectDate('today')">今天</el-button>
                    <el-button size="small" @click="selectDate('next-month')">
                        下个月
                    </el-button>
                    <el-button size="small" @click="selectDate('next-year')">
                        下一年
                    </el-button>
                </el-button-group>
            </template>
            <template #date-cell="{ data }">
                <div @mouseover="handleMouseOver(data.day)" @mouseleave="handleMouseLeave"
                    style="height: 100%;width: 100%;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <p :class="data.isSelected ? 'is-selected' : ''">
                            {{ data.day.split('-').slice(2).join('-') }}
                            {{ data.isSelected ? '✔️' : '' }}
                        </p>
                        <el-icon v-show="hoveredDate === data.day" @click="dialog = true">
                            <CirclePlus />
                        </el-icon>
                    </div>
                    <p v-for=" item in getHolidayInfo(data.day)">
                        {{ item }}
                    </p>
                </div>
            </template>
        </el-calendar>
        <el-drawer v-model="dialog" :title="$t('Calendar.add_schedule_title')" :before-close="cancelForm" direction="rtl"
            class="demo-drawer">
            <div class="demo-drawer__content">
                <el-form :model="form">
                    <el-form-item :label="$t('Calendar.schedule_title')" :label-width="formLabelWidth">
                        <el-input v-model="form.schedule_title" autocomplete="off" />
                    </el-form-item>
                    <el-form-item :label="$t('Calendar.schedule_time')" :label-width="formLabelWidth">
                        <el-date-picker
                            v-model="form.schedule_date"
                            type="datetimerange"
                        />
                    </el-form-item>
                    <el-form-item :label="$t('Calendar.schedule_content')" :label-width="formLabelWidth">
                        <el-input v-model="form.schedule_content" autocomplete="off"  type="textarea" />
                    </el-form-item>
                    <el-form-item :label="$t('Calendar.schedule_address')" :label-width="formLabelWidth">
                        <el-input v-model="form.schedule_address" autocomplete="off"  type="textarea" />
                    </el-form-item>
                    
       
                    <el-form-item :label="$t('Calendar.schedule_alarm')"  :label-width="formLabelWidth">
                        <el-select v-model="form.schedule_alarm" >
                            <el-option label="5分钟" value="5" />
                            <el-option label="10分钟" value="10" />
                            <el-option label="15分钟" value="15" />
                            <el-option label="20分钟" value="20" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">{{$t('common.cancel')}}</el-button>
                    <el-button type="primary" :loading="loading" @click="onClick">
                        {{ loading ? t('common.being_submit') : t('common.submit') }}
                    </el-button>
                </div>
            </div>
        </el-drawer>
    </div>

</template>
<style lang="scss">
.calendar {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .el-calendar {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
}
</style>